import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, List, Avatar, Tag } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  FileTextOutlined,
  ShoppingOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import { BasicLayout } from '../../g-index/BasicLayout';
import { DashboardApi } from './server';
import './index.less';

/**
 * 仪表盘页面
 */
export const Dashboard: React.FC = () => {
  // 统计数据
  const [stats, setStats] = useState({
    users: 0,
    orders: 0,
    products: 0,
    articles: 0,
  });

  // 最近活动
  const [activities, setActivities] = useState([]);

  // 获取统计数据
  useEffect(() => {
    const fetchStats = async () => {
      try {
        const result = await DashboardApi.getStats();
        setStats(result);
      } catch (error) {
        console.error('获取统计数据失败', error);
      }
    };

    fetchStats();
  }, []);

  // 获取最近活动
  useEffect(() => {
    const fetchActivities = async () => {
      try {
        const result = await DashboardApi.getActivities();
        setActivities(result);
      } catch (error) {
        console.error('获取最近活动失败', error);
      }
    };

    fetchActivities();
  }, []);

  // 处理注销
  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    window.location.href = '/login';
  };

  return (
    <BasicLayout onLogout={handleLogout}>
      <div className="dashboard-container">
        <h2 className="page-title">仪表盘</h2>

        {/* 统计卡片 */}
        <Row gutter={16} className="stats-row">
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="用户总数"
                value={stats.users}
                prefix={<UserOutlined />}
                suffix={
                  <Tag color="green">
                    <ArrowUpOutlined /> 12%
                  </Tag>
                }
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="订单总数"
                value={stats.orders}
                prefix={<ShoppingCartOutlined />}
                suffix={
                  <Tag color="green">
                    <ArrowUpOutlined /> 8%
                  </Tag>
                }
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="商品总数"
                value={stats.products}
                prefix={<ShoppingOutlined />}
                suffix={
                  <Tag color="green">
                    <ArrowUpOutlined /> 5%
                  </Tag>
                }
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} md={6}>
            <Card>
              <Statistic
                title="文章总数"
                value={stats.articles}
                prefix={<FileTextOutlined />}
                suffix={
                  <Tag color="red">
                    <ArrowDownOutlined /> 3%
                  </Tag>
                }
              />
            </Card>
          </Col>
        </Row>

        {/* 最近活动 */}
        <Card title="最近活动" className="activity-card">
          <List
            itemLayout="horizontal"
            dataSource={activities}
            renderItem={(item: any) => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={item.title}
                  description={item.description}
                />
                <div>{item.time}</div>
              </List.Item>
            )}
          />
        </Card>
      </div>
    </BasicLayout>
  );
}; 